/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host,
:host([size="500"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500);
}

:host([size="50"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50);
}

:host([size="75"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75);
}

:host([size="100"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100);
}

:host([size="200"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200);
}

:host([size="300"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300);
}

:host([size="400"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400);
}

:host([size="600"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600);
}

:host([size="700"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700);
}

:host([size="800"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800);
}

:host([size="900"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900);
}

:host([size="1000"]) {
    --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000);
}

:host {
    --spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size));
    --spectrum-thumbnail-border-color: var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity))));
    --spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800)));
    --spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100));
    --spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200));
    --spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
    --spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)));
    --spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)));
    --spectrum-thumbnail-layer-border-width-inner: var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400));
    --spectrum-thumbnail-layer-border-width-outer: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100));
    --spectrum-thumbnail-focus-indicator-thickness: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
    --spectrum-thumbnail-focus-indicator-gap: var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
    --spectrum-thumbnail-focus-indicator-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color)));
    --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
    inline-size: var(--spectrum-thumbnail-size);
    block-size: var(--spectrum-thumbnail-size);
    z-index: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden;
}

:host,
:host:before {
    border-radius: var(--spectrum-thumbnail-border-radius-default);
}

:host:before {
    content: "";
    z-index: 2;
    inline-size: 100%;
    block-size: 100%;
    box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color);
    position: absolute;
}

:host([disabled]) {
    opacity: var(--mod-thumbnail-color-opacity-disabled, var(--spectrum-thumbnail-color-opacity-disabled));
}

:host([focused]) {
    overflow: visible;
}

:host([focused]):after {
    content: "";
    border-style: solid;
    border-width: var(--spectrum-thumbnail-focus-indicator-thickness);
    border-color: var(--spectrum-thumbnail-focus-indicator-color);
    border-radius: var(--spectrum-thumbnail-border-radius-default);
    position: absolute;
    inset-block-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
    inset-block-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
    inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
    inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
}

:host([focused]) .image-wrapper {
    border-radius: var(--spectrum-thumbnail-border-radius-default);
    overflow: hidden;
}

:host([layer]) {
    border-style: solid;
    border-width: var(--spectrum-thumbnail-layer-border-width-outer);
    border-color: var(--spectrum-thumbnail-layer-border-color-outer);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    display: flex;
}

:host([layer]):before {
    content: none;
}

:host([layer][selected]) {
    outline-style: solid;
    outline-color: var(--spectrum-thumbnail-border-color-selected);
    outline-width: var(--spectrum-thumbnail-border-width-selected);
    outline-offset: calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner));
}

.layer-inner {
    inline-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
    block-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
    outline-style: solid;
    outline-color: var(--spectrum-thumbnail-layer-border-color-inner);
    outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));
    justify-content: center;
    align-items: center;
    display: flex;
}

.image-wrapper {
    inline-size: 100%;
    block-size: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

::slotted(*) {
    max-inline-size: 100%;
    max-block-size: 100%;
    z-index: 1;
    position: relative;
}

:host([cover]) ::slotted(*) {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    object-position: center;
}

.background {
    z-index: 0;
    block-size: 100%;
    inline-size: 100%;
    border-radius: var(--spectrum-thumbnail-border-radius-default);
    background-position: 50%;
    background-size: cover;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
}

@media (forced-colors: active) {
    :host {
        --highcontrast-thumbnail-border-color-selected: Highlight;
        --highcontrast-thumbnail-focus-indicator-color: Highlight;
        --highcontrast-thumbnail-border-color: CanvasText;
        --highcontrast-thumbnail-layer-border-color-inner: Canvas;
        --highcontrast-thumbnail-layer-border-color-outer: CanvasText;
        forced-color-adjust: none;
    }
}
